<template>
  
  <div class="index">
    <div v-if="show" class="loading">加载中<van-loading /></div>
    <div v-else class="index-nav">
      <div class="index-nav-top">
        <img src="@/assets/images/logo.png" alt="" />
        <van-search @click="goToSearch" placeholder="搜素商品名称" />
        <img @click="$router.push({path:'/login'})" src="@/assets/images/mine1.png" alt="" />
      </div>
      <div class="index-nav-under">
        <van-tabs  v-model="active" title-active-color="#ed5b00" title-inactive-color="#747474" v-show="!showAnimate" >
      <van-tab v-for="(c,i) in indexTabList.tabs" :key="c.page_id">
        <template #title><div @click="goIndexItem(c.page_type,c.page_id,i)">{{ c.name }}</div></template>
      </van-tab>
        </van-tabs>
        <!-- <div @click="showTab">
          <van-icon class="index-nav-icon" :class="{ indexRotated: showAnimate }" name="arrow-down" />
        </div>
        
        <div v-show="showAnimate" class="index-nav-all">全部</div>
        <div class="index-nav-hidunder" v-show="showAnimate">

          <div v-for="c in indexTabList.tabs" :key="c.page_id" :title="c.name" class="index-nav-hidunder-tab">
            <div>{{ c.name }}</div>
          </div>
        </div> -->
      </div>
    </div>
    
    <!-- <transition :name="transitionName">
           <keep-alive include="index">-->  <!-- class="child-view" -->
                <router-view> </router-view>
            <!-- </keep-alive>
        </transition>  -->
    <indexItemContentView v-show="indexShow" :dataList="indexTabList.data"></indexItemContentView>
    
  </div>
</template>

<script>
import indexItemContentView from '@/components/IndexView/indexItemContentView.vue';
export default {
  data() {
    return {
      indexTabList: [],
      active: 0,
      showAnimate: false,
      show:true,
      indexShow:true,
      transitionName: 'slide-left'
    };
  },
  methods: {
    //拿首页选项卡数据，固定API就没有单独封装
    getIndexTabData() {
      this.$http("https://apis.netstart.cn/xmsc/home/page?page_type=home&page_id=0").then(({ data }) => {
        console.log(data);
        this.indexTabList = data.data;
        this.show = false;
      });
    },
    //点击触发动画效果，显示Tab栏
    // showTab() {
    //   this.showAnimate = !this.showAnimate;
    // },
    //点击Tab跳转到子路由
    goIndexItem(t,id,index){
      this.indexShow = false;
      this.$router.push({
        name:"indexitem",
        params:{
          type:t,
          id:id,
          index:index,
        }
      }) 
    },
    goToSearch(){
           this.$router.push({
            path:'/search'
           })
        }
  },

  created() {
    this.getIndexTabData();
  },
  components:{
    indexItemContentView,
  }
};
</script>

<style lang="scss" >
body {
  // background: #f2f2f2;

  .index {
    .loading{
    display: flex;
    justify-content: center;
      }
    .index-nav {
      position: relative;
      position: sticky;
      top: 0;
      z-index: 10;
      .index-nav-top {
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        background: #f2f2f2;
        .van-search {
          background: #f2f2f2;
          width: 75%;
        }

        img {
          width: 6vw;
          height: 6.5vw;
        }
      }

      .index-nav-under {
        position: relative;
        background: #f2f2f2;

        .van-tabs {
          width: 100%;
          margin: 0 auto;

          .van-tabs__nav {
            background: #f2f2f2;
            width: 80%;
            height: 88%;
            margin: 0 auto;
          }

          .van-tabs__line {
            bottom: 10px;
            background: #ff6700;
          }
          }
          // .index-nav-icon {
          //   position: absolute;
          //   top: 2vw;
          //   right: 2vw;
          // }

          // .indexRotated {
          //   animation: rotateIcon .3s linear;
          //   animation-fill-mode: forwards;
          // }

          // @keyframes rotateIcon {
          //   from {
          //     transform: rotate(0deg)
          //   }

          //   to {
          //     transform: rotate(180deg)
          //   }
          // }
        
      

      // .index-nav-all {
      //   position: absolute;
      //   width: 90%;
      //   z-index: 99;
      //   top: 0vw;
      // }

      // .index-nav-hidunder {
      //   position: absolute;
      //   top: 10vw;
      //   display: flex;
      //   column-gap: 5vw;
      //   row-gap: 5vw;
      //   width: 95%;
      //   margin: 0 auto;
      //   flex-wrap: wrap;
      //   margin-left: 1.5vw;

      //   .index-nav-hidunder-tab {
      //     width: 20vw;
      //     height: 8vw;
      //     color: #747474;
      //     font-size: 14px;
      //     text-align: center;
      //     background: #fff;
      //     line-height: 8vw;
      //     border-radius: 5px;
      //   }
      // }
     } 
    }    
  }
 
    
}
.child-view {
    position: absolute;
    width:100%;
    transition: all .4s ;
}
.slide-left-enter, .slide-right-leave-active {
    opacity: 0;
    -webkit-transform: translate(100%, 0);
    transform: translate(100%, 0);
}
.slide-left-leave-active, .slide-right-enter {
    opacity: 0;
    -webkit-transform: translate(-100%, 0);
    transform: translate(-100%, 0);
}

</style>